<template>
	<view class="" style="padding-top: 30rpx;">
		<view class="binding">
			<view class="">我的收款银行卡</view>
			<view class="paytype">
				<image src="../../static/wallet/backid.png" mode=""></image>
				<text>银行卡</text>
			</view>
			<view class="paydetail flex-between">
				<view class="">开户行</view>
				<view class="">中国银行</view>
			</view>
			<view class="paydetail flex-between">
				<view class="">姓名</view>
				<view class="">哈哈哈</view>
			</view>
			<view class="paydetail flex-between">
				<view class="">银行卡号</view>
				<view class="flex">
					<text>6222611111111221111</text>
					<image src="../../static/wallet/copy.png" mode=""></image>
				</view>
			</view>
			<view class="payname flex">
				<image src="../../static/wallet/wechat.png" mode=""></image>
				<view class="">微信支付</view>
			</view>
			<view class="payqr flex-between">
				<view class="">收款二维码</view>
				<view class="qrcode">
					<uqrcode ref="uqrcode" canvas-id="qrcode" size="60" value="https://uqrcode.cn/doc"
						:options="{ margin: 0 }"></uqrcode>
				</view>
			</view>
			<view class="payline"></view>
			<view class="payname flex">
				<image src="../../static/wallet/Alipay.png" mode=""></image>
				<view class="">支付宝</view>
			</view>
			<view class="payqr flex-between">
				<view class="">收款二维码</view>
				<view class="qrcode">
					<uqrcode ref="uqrcode" canvas-id="qrcode" size="60" value="https://uqrcode.cn/doc"
						:options="{ margin: 0 }"></uqrcode>
				</view>
			</view>
			<view class="paydetail flex-between">
				<view class="">支付宝账号</view>
				<view class="flex">
					<text>6222611111111221111</text>
					<image src="../../static/wallet/copy.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="isbtn istext" @click="$fun.jump(`./addbind`)">
			修改
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			copy(text) {
				uni.setClipboardData({
					data: text,
					success: () => {
						this.showToast && uni.$u.toast('复制成功')
					},
					fail: () => {
						this.showToast && uni.$u.toast('复制失败')
					},
					complete: () => {
						// this.showTooltip = false
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.binding {
		width: 690rpx;
		// height: 188rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		margin: 0 auto;
		padding: 30rpx;
		box-sizing: border-box;
	}

	.paytype {
		font-weight: 500;
		font-size: 24rpx;
		color: #999999;
		margin: 20rpx 0;

		image {
			width: 23rpx;
			height: 18rpx;
			margin-right: 10rpx;
		}
	}

	.payname {
		font-weight: 500;
		font-size: 24rpx;
		color: #999999;
		margin-top: 30rpx;

		image {
			width: 24rpx;
			height: 24rpx;
			margin-right: 10rpx;
		}
	}

	.payqr {
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;
		margin-top: -20rpx;
		margin-bottom: 30rpx;

		.qrcode {
			width: 120rpx;
			height: 120rpx;
		}

		image {
			width: 100%;
			height: 100%;
		}
	}

	.paydetail {
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;
		margin-bottom: 20rpx;

		image {
			width: 32rpx;
			height: 32rpx;
			margin-left: 10rpx;
		}
	}

	.istext {
		width: 690rpx;
		height: 88rpx;
		border-radius: 44rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #CCCCCC;
		line-height: 88rpx;
		text-align: left;
		font-style: normal;
		text-align: center;
		margin: 90rpx auto 0;
	}

	.isbtn {
		background: $uni-color-primary;
		color: #FFFFFF;
	}
</style>